<template>
  <div class="share-view view-border column q-pa-sm">
    <div class="hint-string">SHARE</div>
    <div class="row q-gutter-x-md items-center q-my-md">
      <q-btn
        fab-mini
        padding="none"
        flat
        style="width: 40px; height: 40px"
        v-singular-event:btn:share-to-facebook
      >
        <q-img :src="facebookIcon" />
      </q-btn>
      <q-btn
        fab-mini
        padding="none"
        flat
        style="width: 40px; height: 40px"
        v-singular-event:btn:share-to-twitter
      >
        <q-img :src="twitterIcon" />
      </q-btn>
      <q-btn
        fab-mini
        padding="none"
        flat
        style="width: 40px; height: 40px"
        v-singular-event:btn:share-to-google
      >
        <q-img :src="googleIcon" />
      </q-btn>
      <q-btn
        fab-mini
        padding="none"
        flat
        style="width: 40px; height: 40px"
        v-singular-event:btn:share-to-wechat
      >
        <q-img :src="wechatIcon" />
      </q-btn>
    </div>
    <div class="share-link row justify-between items-center fit">
      <div class="link">{{ url }}</div>
      <q-btn
        flat
        dense
        label="copy"
        color="accent"
        v-singular-event:btn:share-link-copied
      />
    </div>
    <q-separator class="q-my-sm" />
    <q-checkbox
      size="xs"
      class="link-hint-string"
      label="Link width creators audio"
      v-model="linkAudio"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import facebookIcon from 'assets/images/lg-facebook-48px@2x.png';
import twitterIcon from 'assets/images/lg-twitter-48px@2x.png';
import googleIcon from 'assets/images/lg-google-48px@2x.png';
import wechatIcon from 'assets/images/lg-wechat-48px@2x.png';
const linkAudio = ref(false);
const url = ref('https://short.url/123');
</script>
<style lang="sass" scoped>

.share-view
  min-width: 332px
  width: 100%
.view-border
  border: 1px solid #404040
  border-radius: 6px
  background-color: rgba(35,35,35,1)
  padding: 12px 12px 6px 12px
.share-link
  background-color: #101010
  padding: 0px 12px

.hint-string
  font-size: 12px
  fonts-weight: bold
  color: $sub
.link-hint-string
  font-size: 10px
  color: $sub
</style>
